<template>
  <div class="show-demo">
    <Form
      ref="videoManagementBatchEdit"
      :form-node="formNode"
      :form-model="formModel"
      :form-inline="true"
    />
    <div class="show-demo-table">
      <Table
        :table-data="tableData"
        :columns="columns"
        :turn-page="tableTurnPage"
        :handle-size-change="handleSizeChange"
        :select="select"
        :select-all="select"
        :height="550"
      />
    </div>
  </div>
</template>
<script>
import Form from '@/components/Form/Form'
import Table from '@/components/Table/Table'
export default {
  components: {
    Form,
    Table
  },
  props: ['popData'],
  data() {
    return {
      tableData: {
        loading: false,
        data: [
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          },
          {
            hazardName: '123'
          }
        ],
        pages: '',
        currentPage: 1,
        size: 10,
        layout: 'prev, pager, next, jumper, sizes, total',
        border: true,
        total: 200
      },
      columns: [
        {
          type: 'selection',
          width: '50px',
          algin: 'center'
        },
        {
          label: '序号',
          type: 'index',
          algin: 'center',
          width: '60px'
        },
        {
          dataName: 'hazardName',
          label: '重大危险源名称',
          align: 'left',
          width: '330px'
        },
        {
          dataName: 'equipName',
          label: '设备名称',
          align: 'left',
          width: '330px'
        },
        {
          dataName: 'targetName',
          label: '指标名称',
          align: 'left',
          width: '330px'
        },
        {
          dataName: 'targetTypeName',
          label: '指标类型',
          align: 'center',
          width: '140px'
        },
        {
          dataName: 'onlineName',
          label: '在线状态',
          align: 'center',
          width: '140px'
        },
        {
          dataName: 'onlineUpdateTime',
          label: '离线时间',
          align: 'center',
          width: '200px'
        },
        {
          dataName: 'offlineTimeInterval',
          label: '离线时长',
          align: 'center',
          width: '200px'
        },
        {
          dataName: 'planOnlineTime',
          label: '计划上线时间',
          align: 'center',
          width: '200px'
        },
        {
          dataName: 'offlineReason',
          label: '离线原因',
          align: 'left',
          width: '330px',
          formatter: (row, cell, cellValue) => {
            if (!cellValue) {
              return '未报备离线原因'
            } else {
              let str = cellValue
              if (str.length > 20) {
                str = str.slice(0, 19) + '...'
              }
              return (
                <el-tooltip
                  content={cellValue}
                  popper-class='ax-tooptip'
                  placement='top'
                >
                  <span>{str}</span>
                </el-tooltip>
              )
            }
          }
        },
        {
          dataName: 'i',
          label: '附件',
          align: 'center',
          width: '140px',
          formatter: (row, cell, cellValue) => {
            if (row.attachFileName) {
              return (
                <span style={`cursor:pointer;`} onClick={() => {}}>
                  {'查看'}
                </span>
              )
            } else {
              return <span>{'-'}</span>
            }
          }
        }
      ],
      formNode: [
        {
          label: 'input：',
          width: '310px',
          labelWidth: '110px',
          formComponents: [
            {
              width: '200px',
              type: 'Public',
              componentName: 'el-input',
              modelName: 'companyName',
              placeholder: '请输入',
              clearable: true
            }
          ]
        },
        {
          label: '是否报备：',
          width: '310px',
          labelWidth: '110px',
          formComponents: [
            {
              width: '200px',
              type: 'Select',
              componentName: 'IsReport',
              modelName: 'reportCode1',
              placeholder: '请选择是否报备',
              clearable: false
            }
          ]
        },
        {
          label: '自定义下拉：',
          width: '310px',
          labelWidth: '110px',
          formComponents: [
            {
              width: '200px',
              type: 'Select',
              componentName: 'IsReport',
              modelName: 'reportCode2',
              placeholder: '请选择是否报备',
              clearable: false,
              options: [
                { optionsId: true, optionsName: '自定义' },
                { optionsId: false, optionsName: '没有自定义' }
              ],
              change: (e) => {
                console.log(e)
              }
            }
          ]
        },
        {
          label: '年月日：',
          width: '310px',
          labelWidth: '110px',
          formComponents: [
            {
              width: '200px',
              type: 'Public',
              componentName: 'el-date-picker',
              modelName: 'endDateStr1',
              placeholder: '请选择时间',
              clearable: true,
              pickerOptions: {
                disabledDate(time) {
                  // 时间方法
                }
              }
            }
          ]
        },
        {
          label: '时间范围：',
          width: '310px',
          labelWidth: '110px',
          formComponents: [
            {
              width: '200px',
              type: 'Public',
              typeModel: 'daterange',
              componentName: 'el-date-picker',
              modelName: 'endDateStr2',
              placeholder: '请选择时间',
              startPlaceholder: '开始',
              endPlaceholder: '结束',
              clearable: true,
              pickerOptions: {
                disabledDate(time) {
                  // 时间方法
                }
              }
            }
          ]
        },
        {
          label: '日期时间：',
          width: '310px',
          labelWidth: '110px',
          formComponents: [
            {
              width: '200px',
              type: 'Public',
              typeModel: 'datetime',
              componentName: 'el-date-picker',
              modelName: 'endDateStr3',
              placeholder: '请选择时间',
              clearable: true,
              pickerOptions: {
                disabledDate(time) {
                  // 时间方法
                }
              }
            }
          ]
        },
        {
          label: 'textarea：',
          width: '100%',
          labelWidth: '110px',
          formComponents: [
            {
              width: '100%',
              type: 'Public',
              componentName: 'textarea',
              modelName: 'companyName2',
              placeholder: '请输入',
              clearable: true
            }
          ]
        },
        {
          label: ' ',
          width: '150px',
          labelWidth: '20px',
          formComponents: [
            {
              width: '110px',
              text: '重置',
              type: 'Public',
              typeModel: '',
              icon: 'el-icon-refresh-left',
              componentName: 'el-button',
              clickFun: () => {}
            }
          ]
        },
        {
          label: ' ',
          width: '150px',
          labelWidth: '20px',
          formComponents: [
            {
              width: '160px',
              text: '调用父级方法',
              type: 'Public',
              typeModel: 'primary',
              icon: 'el-icon-refresh-left',
              componentName: 'el-button',
              clickFun: () => {
                this.save()
              }
            }
          ]
        },
        {
          label: '  ',
          width: '200px',
          labelWidth: '90px',
          formComponents: [
            {
              width: '110px',
              text: '关闭',
              type: 'Public',
              typeModel: 'danger',
              icon: 'el-icon-refresh-left',
              componentName: 'el-button',
              clickFun: () => {
                this.close()
              }
            }
          ]
        }
      ],
      // 表单参数
      formModel: {
        companyName: '',
        reportCode1: '',
        reportCode2: '',
        endDateStr1: '',
        endDateStr2: [],
        endDateStr3: '',
        companyName2: '',
        checkList: []
      }
    }
  },
  methods: {
    // 多选方法
    select(row, selection) {},
    // 每页多少条方法
    handleSizeChange(size) {},
    // 翻页方法
    tableTurnPage(current) {},
    save() {
      this.popData.upData()
    },
    close() {
      const query = {
        ...this.formModel
      }
      this.$parent.closePop()
    }
  }
}
</script>
<style lang="scss">
.show-demo {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 50px 20px;
  display: flex;
  flex-direction: column;
  .show-demo-table {
    display: flex;
    flex: 1;
  }
}
</style>
